<template>
  <div id="circuitSharing">
    <el-container>
      <el-main>
        <el-row >
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row class="floatLeft">
            <el-form-item label="计费账期">
              <el-input  placeholder="计费账期" v-model="form.b1" ></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
              <el-input  placeholder="客户名称" v-model="form.c1"></el-input>
            </el-form-item>
            <el-form-item label="计费ID">
              <el-input placeholder="计费ID" v-model="form.d1" ></el-input>
            </el-form-item >
            <el-form-item label="电路代号">
              <el-input placeholder="电路代号" v-model="form.h1"></el-input>
            </el-form-item>
            <el-form-item label="摊分实体1">
              <el-input placeholder="摊分实体1" v-model="form.ae1"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        </el-row>
        <el-row class="floatLeft">
          <span>请上传集中结算系统当月账期分摊报表</span>
          <el-button type="primary" size="small"  @click="dialogFormVisible = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="500">
          <el-table-column label="序号"
            type="index"
            width="50"></el-table-column>
          <el-table-column prop="a1" label="摊分账期"></el-table-column>
          <el-table-column prop="b1" label="计费账期"></el-table-column>
          <el-table-column prop="c1" label="客户名称" width="150"></el-table-column>
          <el-table-column prop="d1" label="计费ID"></el-table-column>
          <el-table-column prop="e1" label="PVC对应A端口"></el-table-column>
          <el-table-column prop="f1" label="PVC对应Z端口"></el-table-column>
          <el-table-column prop="g1" label="出账类型"></el-table-column>
          <el-table-column prop="h1" label="电路代号" width="150"></el-table-column>
          <el-table-column prop="i1" label="A端本地专线号"></el-table-column>
          <el-table-column prop="j1" label="Z端本地专线号"></el-table-column>
          <el-table-column prop="k1" label="一站流水号"></el-table-column>
          <el-table-column prop="l1" label="A端运营商"></el-table-column>
          <el-table-column prop="m1" label="Z端运营商"></el-table-column>
          <el-table-column prop="n1" label="A端省份"></el-table-column>
          <el-table-column prop="o1" label="A端城市"></el-table-column>
          <el-table-column prop="p1" label="A端地址" width="300"></el-table-column>
          <el-table-column prop="q1" label="Z端省份"></el-table-column>
          <el-table-column prop="r1" label="Z端城市"></el-table-column>
          <el-table-column prop="s1" label="Z端地址"></el-table-column>
          <el-table-column prop="t1" label="发起方运营商"></el-table-column>
          <el-table-column prop="u1" label="发起方"></el-table-column>
          <el-table-column prop="v1" label="产品"></el-table-column>
          <el-table-column prop="w1" label="租用范围"></el-table-column>
          <el-table-column prop="x1" label="接入产品"></el-table-column>
          <el-table-column prop="y1" label="接入租用范围"></el-table-column>
          <el-table-column prop="z1" label="服务(速率)"></el-table-column>
          <el-table-column prop="aa1" label="业务类型"></el-table-column>
          <el-table-column prop="ab1" label="起租时间"></el-table-column>
          <el-table-column prop="ac1" label="止租时间"></el-table-column>
          <el-table-column prop="ad1" label="摊分实体类型1"></el-table-column>
          <el-table-column prop="ae1" label="摊分实体1"></el-table-column>
          <el-table-column prop="af1" label="摊分实体类型2"></el-table-column>
          <el-table-column prop="ag1" label="摊分实体2"></el-table-column>
          <el-table-column prop="ah1" label="摊分实体类型3"></el-table-column>
          <el-table-column prop="ai1" label="摊分实体3"></el-table-column>
          <el-table-column prop="aj1" label="摊分实体类型4"></el-table-column>
          <el-table-column prop="ak1" label="摊分实体4"></el-table-column>
          <el-table-column prop="al1" label="摊分实体类型5"></el-table-column>
          <el-table-column prop="am1" label="摊分实体5"></el-table-column>
          <el-table-column prop="an1" label="摊分实体类型6"></el-table-column>
          <el-table-column prop="ao1" label="摊分实体6"></el-table-column>
          <el-table-column prop="ap1" label="资费项目类型1"></el-table-column>
          <el-table-column prop="aq1" label="收费方1"></el-table-column>
          <el-table-column prop="ar1" label="标准价1"></el-table-column>
          <el-table-column prop="as1" label="优惠1"></el-table-column>
          <el-table-column prop="at1" label="客户收入1"></el-table-column>
          <el-table-column prop="au1" label="发生额1"></el-table-column>
          <el-table-column prop="av1" label="调整值1"></el-table-column>
          <el-table-column prop="aw1" label="资费项目类型2"></el-table-column>
          <el-table-column prop="ax1" label="收费方2"></el-table-column>
          <el-table-column prop="ay1" label="标准价2"></el-table-column>
          <el-table-column prop="az1" label="优惠2"></el-table-column>
          <el-table-column prop="ba1" label="客户收入2"></el-table-column>
          <el-table-column prop="bb1" label="发生额2"></el-table-column>
          <el-table-column prop="bc1" label="调整值2"></el-table-column>
          <el-table-column prop="bd1" label="资费项目类型3"></el-table-column>
          <el-table-column prop="be1" label="收费方3"></el-table-column>
          <el-table-column prop="bf1" label="标准价3"></el-table-column>
          <el-table-column prop="bg1" label="优惠3"></el-table-column>
          <el-table-column prop="bh1" label="客户收入3"></el-table-column>
          <el-table-column prop="bi1" label="发生额3"></el-table-column>
          <el-table-column prop="bj1" label="调整值3"></el-table-column>
          <el-table-column prop="bk1" label="资费项目类型4"></el-table-column>
          <el-table-column prop="bl1" label="收费方4"></el-table-column>
          <el-table-column prop="bm1" label="标准价4"></el-table-column>
          <el-table-column prop="bn1" label="优惠4"></el-table-column>
          <el-table-column prop="bo1" label="客户收入4"></el-table-column>
          <el-table-column prop="bp1" label="发生额4"></el-table-column>
          <el-table-column prop="bq1" label="调整值4"></el-table-column>
          <el-table-column prop="br1" label="资费项目类型5"></el-table-column>
          <el-table-column prop="bs1" label="收费方5"></el-table-column>
          <el-table-column prop="bt1" label="标准价5"></el-table-column>
          <el-table-column prop="bu1" label="优惠5"></el-table-column>
          <el-table-column prop="bv1" label="客户收入5"></el-table-column>
          <el-table-column prop="bw1" label="发生额5"></el-table-column>
          <el-table-column prop="bx1" label="调整值5"></el-table-column>
          <el-table-column prop="by1" label="资费项目类型6"></el-table-column>
          <el-table-column prop="bz1" label="收费方6"></el-table-column>
          <el-table-column prop="ca1" label="标准价6"></el-table-column>
          <el-table-column prop="cb1" label="优惠6"></el-table-column>
          <el-table-column prop="cc1" label="客户收入6"></el-table-column>
          <el-table-column prop="cd1" label="发生额6"></el-table-column>
          <el-table-column prop="ce1" label="调整值6"></el-table-column>
          <el-table-column prop="cf1" label="资费项目类型7"></el-table-column>
          <el-table-column prop="cg1" label="收费方7"></el-table-column>
          <el-table-column prop="ch1" label="标准价7"></el-table-column>
          <el-table-column prop="ci1" label="优惠7"></el-table-column>
          <el-table-column prop="cj1" label="客户收入7"></el-table-column>
          <el-table-column prop="ck1" label="发生额7"></el-table-column>
          <el-table-column prop="cl1" label="调整值7"></el-table-column>
          <el-table-column prop="cm1" label="资费项目类型8"></el-table-column>
          <el-table-column prop="cn1" label="收费方8"></el-table-column>
          <el-table-column prop="co1" label="标准价8"></el-table-column>
          <el-table-column prop="cp1" label="优惠8"></el-table-column>
          <el-table-column prop="cq1" label="客户收入8"></el-table-column>
          <el-table-column prop="cr1" label="发生额8"></el-table-column>
          <el-table-column prop="cs1" label="调整值8"></el-table-column>
          <el-table-column prop="ct1" label="发生额合计"></el-table-column>
          <el-table-column prop="cu1" label="调整值合计"></el-table-column>
          <el-table-column prop="cv1" label="摊分单位1"></el-table-column>
          <el-table-column prop="cw1" label="所属省份"></el-table-column>
          <el-table-column prop="cx1" label="摊分金额1"></el-table-column>
          <el-table-column prop="cy1" label="摊分单位2"></el-table-column>
          <el-table-column prop="cz1" label="所属省份"></el-table-column>
          <el-table-column prop="da1" label="摊分金额2"></el-table-column>
          <el-table-column prop="db1" label="摊分单位3"></el-table-column>
          <el-table-column prop="dc1" label="所属省份"></el-table-column>
          <el-table-column prop="dd1" label="摊分金额3"></el-table-column>
          <el-table-column prop="de1" label="摊分单位4"></el-table-column>
          <el-table-column prop="df1" label="所属省份"></el-table-column>
          <el-table-column prop="dg1" label="摊分金额4"></el-table-column>
          <el-table-column prop="dh1" label="摊分单位5"></el-table-column>
          <el-table-column prop="di1" label="所属省份"></el-table-column>
          <el-table-column prop="dj1" label="摊分金额5"></el-table-column>
          <el-table-column prop="dk1" label="摊分单位6"></el-table-column>
          <el-table-column prop="dl1" label="所属省份"></el-table-column>
          <el-table-column prop="dm1" label="摊分金额6"></el-table-column>
          <el-table-column prop="dn1" label="收费单位1"></el-table-column>
          <el-table-column prop="do1" label="所属省份"></el-table-column>
          <el-table-column prop="dp1" label="应收金额1"></el-table-column>
          <el-table-column prop="dq1" label="收费单位2"></el-table-column>
          <el-table-column prop="dr1" label="所属省份"></el-table-column>
          <el-table-column prop="ds1" label="应收金额2"></el-table-column>
          <el-table-column prop="dt1" label="收费单位3"></el-table-column>
          <el-table-column prop="du1" label="所属省份"></el-table-column>
          <el-table-column prop="dv1" label="应收金额3"></el-table-column>
          <el-table-column prop="dw1" label="收费单位4"></el-table-column>
          <el-table-column prop="dx1" label="所属省份"></el-table-column>
          <el-table-column prop="dy1" label="应收金额4"></el-table-column>
          <el-table-column prop="dz1" label="收费单位5"></el-table-column>
          <el-table-column prop="ea1" label="所属省份"></el-table-column>
          <el-table-column prop="eb1" label="应收金额5"></el-table-column>
          <el-table-column prop="ec1" label="收费单位6"></el-table-column>
          <el-table-column prop="ed1" label="所属省份"></el-table-column>
          <el-table-column prop="ee1" label="应收金额6"></el-table-column>
          <el-table-column prop="ef1" label="收费单位7"></el-table-column>
          <el-table-column prop="eg1" label="所属省份"></el-table-column>
          <el-table-column prop="eh1" label="应收金额7"></el-table-column>
          <el-table-column prop="ei1" label="结入单位1"></el-table-column>
          <el-table-column prop="ej1" label="所属省份"></el-table-column>
          <el-table-column prop="ek1" label="结入金额1"></el-table-column>
          <el-table-column prop="el1" label="结入单位2"></el-table-column>
          <el-table-column prop="em1" label="所属省份"></el-table-column>
          <el-table-column prop="en1" label="结入金额2"></el-table-column>
          <el-table-column prop="eo1" label="结入单位3"></el-table-column>
          <el-table-column prop="ep1" label="所属省份"></el-table-column>
          <el-table-column prop="eq1" label="结入金额3"></el-table-column>
          <el-table-column prop="er1" label="结入单位4"></el-table-column>
          <el-table-column prop="es1" label="所属省份"></el-table-column>
          <el-table-column prop="et1" label="结入金额4"></el-table-column>
          <el-table-column prop="eu1" label="结入单位5"></el-table-column>
          <el-table-column prop="ev1" label="所属省份"></el-table-column>
          <el-table-column prop="ew1" label="结入金额5"></el-table-column>
          <el-table-column prop="ex1" label="结入单位6"></el-table-column>
          <el-table-column prop="ey1" label="所属省份"></el-table-column>
          <el-table-column prop="ez1" label="结入金额6"></el-table-column>
          <el-table-column prop="fa1" label="结出单位1"></el-table-column>
          <el-table-column prop="fb1" label="所属省份"></el-table-column>
          <el-table-column prop="fc1" label="结出金额1"></el-table-column>
          <el-table-column prop="fd1" label="结出单位2"></el-table-column>
          <el-table-column prop="fe1" label="所属省份"></el-table-column>
          <el-table-column prop="ff1" label="结出金额2"></el-table-column>
          <el-table-column prop="fg1" label="结出单位3"></el-table-column>
          <el-table-column prop="fh1" label="所属省份"></el-table-column>
          <el-table-column prop="fi1" label="结出金额3"></el-table-column>
          <el-table-column prop="fj1" label="结出单位4"></el-table-column>
          <el-table-column prop="fk1" label="所属省份"></el-table-column>
          <el-table-column prop="fl1" label="结出金额4"></el-table-column>
          <el-table-column prop="fm1" label="结出单位5"></el-table-column>
          <el-table-column prop="fn1" label="所属省份"></el-table-column>
          <el-table-column prop="fo1" label="结出金额5"></el-table-column>
          <el-table-column prop="fp1" label="结出单位6"></el-table-column>
          <el-table-column prop="fq1" label="所属省份"></el-table-column>
          <el-table-column prop="fr1" label="结出金额6"></el-table-column>
          <el-table-column prop="fs1" label="结出单位7"></el-table-column>
          <el-table-column prop="ft1" label="所属省份"></el-table-column>
          <el-table-column prop="fu1" label="结出金额7"></el-table-column>
          <el-table-column prop="fv1" label="账单周期" width="150"></el-table-column>
          <el-table-column prop="fw1" label="详单类型"></el-table-column>
          <el-table-column prop="fx1" label="出账方式"></el-table-column>
          <el-table-column prop="fy1" label="电路类型"></el-table-column>
          <el-table-column prop="fz1" label="摊分规则类型"></el-table-column>
          <el-table-column prop="ga1" label="是否联通电路"></el-table-column>
          <el-table-column prop="gb1" label="是否为VIK"></el-table-column>
          <!--        <el-table-column-->
          <!--          label="操作"-->
          <!--        >-->
          <!--          <template slot-scope="scope">-->
          <!--            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
          <!--            <el-button type="text" size="small">编辑</el-button>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
        <el-dialog title="上传国内电路(摊分详单月租)" :visible.sync="dialogFormVisible">
          <el-upload
            class="upload-demo"
            action="http://10.68.9.138:8003/contract/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel.xlsx/xls文件</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {formatDate} from '../../components/utils/formatDate'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import global from '../../components/utils/global'

  export default {
    name: 'circuitSharing',
    methods: {
      handleClick (row) {
        console.log(row)
      },
      searchFn () {
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryAll()
        this.queryAllCount()
      },
      onSubmit () {
        this.queryAll()
        this.queryAllCount()
      },
      queryAll: function () {
        let _this = this
        _this.getQueryParams()
      debugger
        axios({
          methods: 'get',
          url: global.host+'/nmMongoliaCircuitSharing/queryAll',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryAllCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/nmMongoliaCircuitSharing/queryAllCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          b1:this.form.b1,
          c1:this.form.c1,
          d1:this.form.d1,
          h1:this.form.h1,
          ae1:this.form.ae1,
        }
      },

      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }

    }
    ,
    data () {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form:{
          b1:'',
          c1:'',
          d1:'',
          h1:'',
          ae1:'',
        }
      }
    }
  }
</script>

<style>
  #circuitSharing {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
